<template>
  <div class='app'>
    <ul>
      <li :style="{ background: color1 }">
        <h2>我是父组件的案例--里面含有子组件--</h2>
        <Son title="---我是第一次使用这个组件---" @changeColor="changeColor1">
          <div>我插槽 插入一个 div在内容上面</div>
          <template v-slot:bottom="color">
            <p :style="{ color: color.color }">我插槽插入一个div在内容下面</p>
          </template>
        </Son>
      </li>
      <li :style="{ background: color2 }">
        <h2>我是父组件的案例--里面含有子组件--</h2>
        <Son title="---我是第二次使用这个组件---" @changeColor="changeColor2">
          <ol>
            <li>天青色等烟雨</li>
            <li>而我在等你</li>
            <li>将那小子拿下</li>
          </ol>
          <template v-slot:bottom="color">
            <i :style="{ color: color.color }">神回复｜马拉多纳有“上帝之手”，C罗有“上帝之发”！为啥巴西比赛的焦点都在观众席？</i>
          </template>
        </Son>
      </li>
      <li :style="{ background: color3 }">
        <h2>我是父组件的案例--里面含有子组件--</h2>
        <Son title="---我是第三次使用这个组件---" @changeColor="changeColor3">
          <table border="1" style="border-collapse: collapse;">
            <thead>
              <tr>
                <th style="text-align:center">日期</th>
                <th style="text-align:center">姓名</th>
                <th style="text-align:center">地址</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2016-05-03</td>
                <td>王小虎</td>
                <td>上海市普陀区金沙江路 1518 弄</td>
              </tr>
              <tr>
                <td>2016-05-03</td>
                <td>王小虎</td>
                <td>上海市普陀区金沙江路 1518 弄</td>
              </tr>
              <tr>
                <td>2016-05-03</td>
                <td>王小虎</td>
                <td>上海市普陀区金沙江路 1518 弄</td>
              </tr>
            </tbody>
          </table>
          <template >
            <!-- <i :style="{ color: color.color }"></i> -->
          </template>
        </Son>
      </li>
    </ul>
  </div>
</template>

<script>
import Son from '@/components/Son'
export default {
  name: 'app',
  /**
  * 定义组件的data函数，用于声明组件内部的状态。
  * 
  * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
  */
  data() {
    return {
      color1: 'rgb(0,0,0)',
      color2: 'rgb(0,0,0)',
      color3: 'rgb(0,0,0)',
    }
  },
  components: {
    Son,
  },
  methods: {
    changeColor1(val) {
      this.color1 = val;
    },
    changeColor2(val) {
      this.color2 = val;
    },
    changeColor3(val) {
      this.color3 = val;
    },
  }
}
</script>

<style scoped>
.app {
  padding: 20px;
}

ul {
  display: flex;
  justify-content: space-evenly;
}

ul>li {
  padding: 20px;
  background-color: #000;
  color: #fff;
}
</style>